/*!
* drawer v2.0.0
* 
* Licensed under MIT
* Author : blivesta
* 
*/
.drawer-hamberger {
	display: none;
}

.drawer-main {
	display: none;
}

@media screen and (max-width: 768px) {
 
	/*手机导航*/
	.nav {
		display: none;
	}

	.navtop {
		display: none;
	}

	#banner {
		display: none;
	}

	.drawer-main {
		display: block;
		position: fixed;
		top: 0;
		width: 190px;
		height: 100%;
		overflow: hidden
	}

	.drawer-left .drawer-main {
		left: -190px;
		-webkit-transition: left .4s cubic-bezier(0.19,1,.22,1);
		-o-transition: left .4s cubic-bezier(0.19,1,.22,1);
		transition: left .4s cubic-bezier(0.19,1,.22,1)
	}

	.drawer-left.drawer-open .drawer-main {
		left: 0
	}

	.drawer-right .drawer-main {
		right: -190px;
		-webkit-transition: right .4s cubic-bezier(0.19,1,.22,1);
		-o-transition: right .4s cubic-bezier(0.19,1,.22,1);
		transition: right .4s cubic-bezier(0.19,1,.22,1)
	}

	.drawer-right.drawer-open .drawer-main {
		right: 0;
		z-index: 9999;
	}

	.drawer-overlay {
		position: relative
	}

	.drawer-left .drawer-overlay,.drawer-left .drawer-hamberger {
		left: 0;
		-webkit-transition: left .4s cubic-bezier(0.19,1,.22,1);
		-o-transition: left .4s cubic-bezier(0.19,1,.22,1);
		transition: left .4s cubic-bezier(0.19,1,.22,1)
	}

	.drawer-left.drawer-open .drawer-overlay,.drawer-left.drawer-open .drawer-hamberger {
		left: 190px
	}

	.drawer-right .drawer-overlay,.drawer-right .drawer-hamberger {
		right: 1%;
		-webkit-transition: right .4s cubic-bezier(0.19,1,.22,1);
		-o-transition: right .4s cubic-bezier(0.19,1,.22,1);
		transition: right .4s cubic-bezier(0.19,1,.22,1)
	}

	.drawer-right.drawer-open .drawer-overlay,.drawer-right.drawer-open .drawer-hamberger {
		right: 190px
	}

	.drawer-overlay-upper {
		position: fixed;
		top: 0;
		z-index: 1100;
		display: none;
		height: 100%;
		background-color: #000;
		background-color: rgba(0,0,0,.5)
	}

	.drawer-left.drawer-open .drawer-overlay-upper {
		right: 0
	}

	.drawer-right.drawer-open .drawer-overlay-upper {
		left: 0
	}

	.drawer-default {
		background-color: #222;
		-webkit-box-shadow: inset 0 0 0 rgba(0,0,0,.5);
		box-shadow: inset 0 0 0 rgba(0,0,0,.5)
	}

	.drawer-default+.drawer-overlay {
		background-color: #fff
	}

	.drawer-default .drawer-brand a {
		display: block;
		width: 100%;
		padding: 20px 15px;
		font-size: 22px;
		color: #fff
	}

	.drawer-default .drawer-brand a:hover {
		color: #444;
		text-decoration: none
	}

	.drawer-default .drawer-nav-title {
		display: block;
		padding: 15px 15px 0 15px;
		font-size: 18px
	}

	.drawer-default .drawer-nav-list {
		padding: 0;
		margin: 0 0 20px 0;
		list-style: none
	}

	.drawer-default .drawer-nav-list li {
		display: block
	}

	.drawer-default .drawer-nav-list li a {
		display: block;
		padding: 15px;
		color: #888;
		font-size: 16px;
	}; 
	.drawer-default .drawer-nav-list li ul a {
		padding: 8px 20px;
	}

	.drawer-hamberger {
		display: block;
		position: fixed;
		z-index: 1000;
		display: block;
		width: 25px;
		height: 23px;
		padding: 10px;
		background-color: transparent;
		border: 0;
		background: #888;
		filter: alpha(opacity=80);
		-moz-opacity: 0.8;
		-khtml-opacity: 0.8;
		opacity: 0.8;
	}

	.drawer-hamberger span {
		margin-top: 10px
	}

	.drawer-hamberger span,.drawer-hamberger span:before,.drawer-hamberger span:after {
		position: absolute;
		display: block;
		width: 25px;
		height: 2px;
		cursor: pointer;
		content: '';
		background-color: #ddd;
		border-radius: 1px;
		-webkit-transition: all .4s cubic-bezier(0.19,1,.22,1);
		-o-transition: all .4s cubic-bezier(0.19,1,.22,1);
		transition: all .4s cubic-bezier(0.19,1,.22,1)
	}

	.drawer-hamberger span:before {
		top: -10px
	}

	.drawer-hamberger span:after {
		bottom: -10px
	}

	.drawer-open .drawer-hamberger span {
		background-color: transparent
	}

	.drawer-open .drawer-hamberger span:before,.drawer-open .drawer-hamberger span:after {
		top: 0
	}

	.drawer-open .drawer-hamberger span:before {
		-webkit-transform: rotate(45deg);
		-ms-transform: rotate(45deg);
		-o-transform: rotate(45deg);
		transform: rotate(45deg)
	}

	.drawer-open .drawer-hamberger span:after {
		-webkit-transform: rotate(-45deg);
		-ms-transform: rotate(-45deg);
		-o-transform: rotate(-45deg);
		transform: rotate(-45deg)
	}

	.drawer-hamberger:hover {
		cursor: pointer
	}
	/*手机导航 end*/
}

@media (min-width:767px) {
	.drawer-responsive.drawer-left .drawer-toggle,.drawer-responsive.drawer-right .drawer-toggle {
		display: none;
		visibility: hidden
	}

	.drawer-responsive.drawer-left .drawer-main {
		left: 0
	}

	.drawer-responsive.drawer-right .drawer-main {
		right: 0
	}
}

@media (min-width:768px) {
	.drawer-responsive {
		background-color: #222
	}

	.drawer-responsive.drawer-left .drawer-main,.drawer-responsive.drawer-right .drawer-main {
		position: absolute;
		width: 150px!important;
		height: auto!important;
		overflow: visible!important
	}

	.drawer-responsive.drawer-left .drawer-main {
		float: left
	}

	.drawer-responsive.drawer-left .drawer-overlay {
		margin-left: 150px
	}

	.drawer-responsive.drawer-right .drawer-main {
		float: right
	}

	.drawer-responsive.drawer-right .drawer-overlay {
		margin-right: 150px
	}
}

@media (min-width:1200px) {
	.drawer-responsive.drawer-left .drawer-main,.drawer-responsive.drawer-right .drawer-main {
		width: 190px!important
	}

	.drawer-responsive.drawer-left .drawer-overlay {
		margin-left: 190px
	}

	.drawer-responsive.drawer-right .drawer-overlay {
		margin-right: 190px
	}
}